import Dom from '../utils/Dom';
import Utils from '../utils/index';

class Tooltip {
    constructor(options) {

        this.root = Dom.append(document.body, 'div', ['tooltip', options && options.className]);
        this.content = Dom.append(this.root, 'div', 'tooltip-content');

        // Dom.addEvent(this.root, 'mouseout', e => {
        //     this.hide();
        // });

        // Dom.addEvent(this.root, 'mouseover', e => {
        //     return Dom.nodefault(e);
        // })

        // Dom.addEvent(this.root, 'contextmenu', e => {
        //     return Dom.nodefault(e);
        // })
    }
    show(innerHTML, position) {
        if(innerHTML) {
            this.content.innerHTML = innerHTML;
        }
        this.root.style.display = 'block';
        if (position) {
            this.setPosition(position);
        }
    }

    setPosition(position) {
        Dom.styles(this.root, {
            left: position.x + 'px',
            top: position.y + 'px'
        });
    }

    hide() {
        this.root.style.display = 'none';
    }
}

export default Tooltip;